<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮动方法4</title>

        <style>
            /* 清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响 */
            /* 清除浮动方法4：在两个父盒子之间“隔离”，隔一个携带clear：both的盒子 */
            /* 该方法可以将墙的一个类设置高度来充当margin的效果  */

            * {
                margin:0;
                padding:0;
            }

            
            p {
                float: left;
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-right: 20px;
            }

            .cl {
                clear: both;
            }

            .h20 {
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div>
            <p></p>
            <p></p>
        </div>
        <div class="cl h20"></div>
        <div>
            <p></p>
            <p></p>
        </div>
    </body>
</html>